<template>
	<view class="coupon">
		<view @catchtouchmove="true" :class="['dialog-backdrop', { 'backdrop-in': show }]" @tap="$emit('on-close')"></view>
		<view :class="['contain', { 'modal-in': show }]">
			<view class="title">
				<text>优惠券</text>
				<image src="/static/close.png" @tap="$emit('on-close')"></image>
			</view>
			<view class="list">
				<scroll-view scroll-y>
					<view class="item" v-for="(i, idx) in cList" :key="i.coupon_id">
						<view class="amount">
							<view>
								<text class="yen">&yen;</text>
								<text class="money">{{ i.MaxMoney }}</text>								
							</view>
							<view class="dsc">{{ i.NeedMoney }}</view>
						</view>
						<view class="desc">
							<view class="h"><text>{{ i.user_scene }}</text>{{ i.remark }}</view>
							<view class="time">
								<view class="s">{{ i.nowtime }} - {{ i.endtime }}</view>
								<view :class="['b', { act: status[idx] }]" @tap="getcoupon(i, idx)">
									<block v-if="!type">
										{{ status[idx] ? '已领取' : '领取' }}
									</block>
									<block v-else>
										使用
									</block>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>				
			</view>
		</view>
	</view>
</template>

<script>
	import { getCoupon } from '@/common/api'
	import { mapGetters } from 'vuex'
	export default {
		props: {
			list: Array,
			show: Boolean,
			type: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				status: []
			}
		},
		computed: {
			cList () {
				return this.list.map(item => {
					let el = Object.assign({}, item)
					el.NeedMoney = isNaN(el.NeedMoney) ? el.NeedMoney : `满${el.NeedMoney}可使用`
					return el
				})
			},
			...mapGetters(['shop', 'userInfo'])
		},
		methods: {
			getcoupon (i, idx) {
				if (this.userInfo && !this.type) {
					if (!this.status[idx]) {
						const params = {
							customer_id: this.shop.customer_id,
							user_id: this.userInfo.id,
							coupon_id: i.coupon_id
						}
						uni.showLoading({ mask: true })
						getCoupon(params).then(res => {
							if (!res.code) {
							this.$set(this.status, idx, true)
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: res.message
								})								
							} else {
								uni.showToast({
									icon: 'none',
									title: res.message
								})								
							}
						})							
					}
				} else {
					if (!this.type) {
						uni.navigateTo({
							url: '/pages/login/index'
						})						
					} else {
						this.$emit('user-coupon', i)
					}
				}				
			}
		}		
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.coupon {
	.dialog-backdrop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(100% + 44px);
		background: rgba(0,0,0,.4);
		z-index: 666;
		visibility: hidden;
		opacity: 0;
		transition-duration: .4s;
		will-change: opacity;
		contain: strict;
		&.backdrop-in {
			visibility: visible;
			opacity: 1;		
		}
	}
	.contain {
		background-color:white;
		z-index: 777;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 40%;
		display: flex;
		flex-direction: column;
		flex-flow: column;
		justify-content: space-between;
		transform: translate3d(0, 100%,0);
		contain: layout;
		will-change:transform, opacity;
		opacity: 0;
		transition:transform .2s, opacity .2s;			
		&.modal-in {
			opacity: 1;
			transform: translate3d(0,0,0);
		}
		.title {
			height: @height;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size:@title;
			padding: 0 15upx;
			.border-bottom;
			image {
				width: 30upx;
				height: 30upx;
			}
		}
		.list {
			flex:1;
			overflow: hidden;
			padding: 15upx 0;			
			scroll-view {
				height: 100%;
				.item {
					margin: 0 15upx 20upx;
					color: #53c7ca;
					padding: 0 20upx;
					border-top: 12upx solid currentColor;
					box-shadow: 0 0 12upx 0 rgba(0,0,0,.1);
					border-radius: 12upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					min-height: 200upx;
					&:last-of-type { margin-bottom: 0 }
					.amount {
						width: 200upx;
						display: flex;
						justify-content: center;
						flex-flow: column;
						flex-direction: column;
						align-items: center;
						.yen { font-size:@minSize; }
						.money { font-size: 60upx;font-weight: bold; letter-spacing:0 }
						.dsc { font-size: 26upx; }
					}
					.desc {
						flex: 1;
						.h {
							font-size:@minSize;
							.twoLine(2);
							height: 72upx;
							line-height: 36upx;
							text {
								background-color: #53c7ca;
								color: white;
								font-size: @minSize;
								position: relative;
								display: inline-block;
								padding: 0 14upx 0 24upx;
								height: 30upx;
								margin-right: 8upx;
								line-height: 30upx;
								position: relative;
								border-radius: 0 8upx 8upx 0;
								&::before {
									position: absolute;
									z-index: 1;
									content: "";
									width: 0;
									top: 0;
									left: -16upx;
									height: 0;
									border-top: 16upx solid white;
									border-right: 16upx solid transparent;
									border-bottom: 16upx solid white;
									border-left: 16upx solid white;									
								}
								&::after {
									content: ".";
									position: absolute;
									color: #fff;
									left: 10upx;
									top: -12upx;
									font-size: 40upx;									
								}
							}
						}
						.time {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.s {
								font-size:@minSize;
								color:#999;
							    .twoLine(1);
							}
							.b {
								color:white;
								background-color:#53c7ca;
								font-size:@minSize;
								padding: 4upx 40upx;
								border-radius: 40upx;
								white-space: nowrap;
								&.act {
									border:2upx solid #999;
									color:#999;
									background-color:white;
								}
							}
						}
					}
				}
			}
		}
	}	
}
</style>
